<template>
  <!--点击扫码成功登录的弹框确认信息-->
  <div>
    <div class="info_top">
      <el-input
        style="width: 250px;"
        size="large"
        @keyup.enter.native="Enter"
        class="filter-item"
        placeholder="请输入手机号"
        :maxlength="11"
        v-model="card.value"
        ref="open"
      >
      </el-input>
      <el-button class="filter-item"  type="primary"  @click="getMobileInfo">确定</el-button>
    </div>
    <el-tabs type="border-card" class="info_tab">
      <el-tab-pane label="基本信息">
        <!--有会员信息的-->
        <div v-if="showinfo">
        <div class="infomation" >
          <div class="info_left">
         <!--   <div class="photo"></div>-->
            <img class="photo" :src="avatar"/>
            <div class="info_type">
              <el-tag type="primary" v-if="cards.card_type === 'times'">次卡</el-tag>
              <el-tag type="primary" v-if="cards.card_type === 'date'">时间卡</el-tag>
              <el-tag type="primary" v-if="cards.card_type === 'clock'">时段卡</el-tag>
              <span v-if="cards.card_type === 'times'">剩余{{cards.times}}次</span>
              <span v-if="cards.card_type === 'clock'">{{cards.clock_start_time}}至</span>
              <span v-if="cards.card_type === 'clock'">{{cards.clock_end_time}}</span>
            </div>
          </div>

          <div class="info_right">
            <p>姓名: {{cards.name}}</p>
            <p>性别: {{cards.sex}}</p>
            <p>手机: {{cards.mobile}}</p>
            <p>有限期至: {{cards.end_date}}</p>
          </div>
        </div>

        <div class="cardtime">
          <div class="info_date">
            <span>开卡日期:</span>
            <span>{{cards.start_date}}</span>
          </div>
          <div class="info_time">
            <span>激活日期:</span>
            <span>{{active_date}}</span>
          </div>
        </div>
        </div>

        <!--没有会员信息的-->
        <div v-if="nofound" class="info_footer">
          <p class="nofound">╮(╯﹏╰）╭</p>
          <p class="noperson">无此会员</p>
        </div>
      </el-tab-pane>

      <el-tab-pane label="更多信息">
        <div v-if="showinfo">
        <div class="more">
          <span>出生日期:</span>
          <span>{{cards.birthday}}</span>
        </div>
        <div class="more">
          <span>工作信息:</span>
          <span>{{cards.job}}</span>
        </div>
        <div class="more">
          <span>住址:</span>
          <span>{{cards.province}}{{cards.city}}{{cards.area}}</span>
        </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button
      v-if="showbutton"
      class="filter-item"
      id="sign_btn"
      type="primary"
      size="large"
      :disabled="disabled"
      @click="goToActive()"
    >
      激活
    </el-button>
    <el-button
      v-if="signbutton"
      class="filter-item"
      id="sign_btn"
      type="primary"
      size="large"
      :disabled="disabled"
      @click="goToSign(cards)"
    >
      {{signtext}}
    </el-button>
  </div>
</template>

<script>
  import { getByMobile, MobileSign, ActiveCard } from '@/api/sign'
  export default{
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      open: {},
    },
    data() {
      return {
        showinfo: false,
        showbutton: false,
        signbutton: false,
        nofound: false,
        signtext: '签到',
        disabled: false,
        avatar: '',
        card: {
          value: ''
        },
        cards: {
          name: '',
          sex: '',
          mobile: '',
          card_type: '',
          times: '',
          end_date: '',
          created_at: '',
          active_date: '',
          birthday: '',
          job: '',
          province: '',
          city: '',
          area: '',
          start_date: '',
          clock_start_time: '',
          clock_end_time: ''
        }
      }
    },
    methods: {
      reloadList () {
        this.$emit('checkInfoReloadList')  // 子组件调用父组件
      },
      closeClean () {
      //  console.log('清空的')
        this.showinfo = false
        this.showbutton = false
        this.signbutton = false
        this.card.value = ''
        this.nofound = false
      },
      Enter () {
       console.log('1')
        this.getMobileInfo()
       console.log('2')
      },
      setFocus (){
        // 1 获取dom元素
        const self = this;
        this.$refs.open.$refs.input.focus()
     //   console.log(this.$refs, this.$refs.open.$refs.input)
        // 2 触发focus方法
      },
      getMobileInfo() {
        getByMobile(this.card.value).then((res) => {
          this.card.value = null
          this.showinfo = true
          this.signtext = '签到'
          this.disabled = false
          this.nofound = false
//          console.log(res)
//          console.log('手机号', this.card.value)
//          console.log(res.card.data.avatar.data.url)
          this.cards.name = res.card.data.name
          this.cards.sex = res.card.data.sex
          this.cards.mobile = res.card.data.mobile
          this.avatar = res.card.data.avatar.data.url
          this.cards.card_type = res.card.data.card_type
          this.cards.times = res.card.data.times
          this.cards.end_date = res.card.data.end_date
          this.cards.start_date = res.card.data.start_date
          this.cards.active_date = res.card.data.active_date
          this.cards.birthday = res.card.data.birthday
          this.cards.job = res.card.data.job
          this.cards.province = res.card.data.province
          this.cards.city = res.card.data.city
          this.cards.area = res.card.data.area
          this.cards.clock_start_time = res.card.data.clock_start_time
          this.cards.clock_end_time = res.card.data.clock_end_time
          this.id = res.card.data.id

          if (res.card.data.active_date === null) {
            this.signbutton = false
            this.showbutton = true
            this.active_date = '您还未激活哦'
          } else {
            this.showbutton = false
            this.signbutton = true
            this.active_date = this.cards.active_date
          }

          if (res.reason) {
            this.$notify.info({
              title: '消息',
              message: res.reason
            });
            this.signtext = '签到'
            if (res.reason === '今天已经签到') {
              this.signtext = '今天已签到'
              this.showbutton = false
            }
            if (res.reason === '该卡已经过期') {
              this.signtext = '已过期'
              this.showbutton = false
            }
          this.signbutton = true
          this.disabled = true
          this.setFocus()
          this.nofound = false
        }

      }


        //这里是显示用户信息然后接着签到
        /*).then((res) => {
            MobileSign(this.cards).then(res => {
              this.$notify.info({
                title: '成功',
                message: '签到成功',
                type: 'success'
              });
              this.reloadList()
              this.setFocus()
              this.signbutton = '已签到'
              this.disabled = true
            }).catch(() => {
              this.$message.error('签到失败')
              this.reloadList()
              this.setFocus()
            })
          }*/
        ).catch((res) => {
          if (res.exception !== '') {
            this.$notify.error({
              title: '错误',
              message: '没有该会员哦'
            });
            this.showbutton = false
            this.showinfo = false
            this.card.value = null
            this.nofound = true
           // this.$router.push({ path: '/noFound' })
          }
        })
      },
      // 点击激活
      goToActive () {
        ActiveCard(this.id).then((res) => {
          this.showbutton = false
          this.$notify.info({
            type: 'success',
            message: '激活成功'
          });
          this.active_date = this.cards.active_date
          this.signbutton = true
        })
      },
      // 点击签到
      goToSign(cards) {
        console.log(cards,'签到的手机')
        MobileSign(cards).then(res => {
          this.$notify.info({
            message: '签到成功',
            type: 'success'
          });
          this.reloadList()
          this.setFocus()
          this.signtext = '已签到'
          this.disabled = true
        }).catch(() => {
          this.$notify.error({
            message: '签到失败'
          });
          this.reloadList()
          this.setFocus()
        })
      }
    },
    mounted () {
      this.setFocus()
    },
    watch: {
      dialogVisible (v) {
        if (v) this.setFocus()
      }
    }
  }
</script>
<style scoped>
  .filter-item{
    margin-left: 10px;
  }
  .photo{
    width: 106px;
    height: 132px;
    margin-right: 30px;
  }
  .info_top{
    display: -webkit-flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  .customer{
    width: 800px;
    margin: 0 auto;
  }
  #sign_btn{
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    margin-top: 20px;
  }
  .infomation{
    display: -webkit-flex;
    justify-content: space-around;
  }
  .info_type{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .cardtime{
    display: -webkit-flex;
    justify-content: space-around;
  }
  .info_date .info_time{
    display: inline-block;
  }
  .info_right{
    line-height: 27px;
  }
  .more{
    margin-top: 10px;
    text-align: left;
  }
  .info_footer{
    margin: 0 auto;
    text-align: center;
  }
  .nofound{
    font-size: 30px;
  }
  .noperson{
    font-size: 20px;
  }
</style>
